/* base 只写公共样式 针对京东网页、头部和底部样式*/
/*版心*/
.w {
    width: 1190px;
    margin: auto;
}
.fr {
    float: right;
}
.fl {
    float: left;
}
.style-red {
    /*京东主色调 页面中部分文字初始颜色
    为防止出现权重高低问题，用！important将其设为最高权重。*/
    color: #f10215!important;
}
li {
    list-style: none;
}
* {
    margin: 0;
    padding: 0;
}
ul, p, h5 {
    margin: 0;
    padding: 0;
}
input, button {
    /*input和button默认有内边距，需先清除。*/
    padding: 0;
    border: 0;
}
a {
    text-decoration: none;
}
img {
    /*去除图片底部缝隙*/
    vertical-align: top;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom:1;
}
@font-face {  /*声明字体  引用字体*/
    font-family: "icomoon";  /*我们自己起名字可以*/
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-style: normal;  /*倾斜字体正常*/
}
body {
    /*整体大部分的背景颜色*/
    background-color: #f6f6f6;
}
/*京东顶部 开始*/
.J_event {
    height: 80px;
    background-color: #000;
}
.J_event a {
    display: block;
    height: 80px;
    background: url("../images/top.jpg") no-repeat;
    position: relative;
}
/*广告右上角的叉号*/
.J_event a i {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 5px;
    font-family: "icomoon";
    font-style: normal;
    text-align: center;
    line-height: 20px;
    color: #fff;
    background-color: rgba(0,0,0,.4);
}
/*京东底部 结束*/
/*快捷导航模块开始*/
.shortcut {
    height: 30px;

    /*行高会继承，给shortcut设置行高，既是给导航栏的左浮动模块和右浮动
      模块 同时设置了行高，从而实现两个模块都垂直居中。*/
    line-height: 30px;
    
    border: 1px solid #dddddd;
    background-color: #e3e4e5;
    font-size: 12px;
    color: #9d9d9d;
}
/*导航栏左侧的定位图标*/
.position {
    font-family: "icomoon";
    font-size: 14px;
    font-style: normal;
    color: #f10215;
}
.shortcut a {
    font-size: 12px;
    color: #9d9d9d;
}
.shortcut a:hover {
    color: #c81623;
}
.shortcut .fl li {
    /*导航栏中的左浮动模块不是紧贴着版心左侧，而是需要流出一点位置
      给下方的京东狗图标，故需要将该左浮动模块向右移动200px，用margin-left或padding-left均可。*/
    margin-left: 200px;
    /*导航栏左浮动模块中的定位字体图标过大，导致所在li的高度超过了shortcut盒子大小，
      从而导致下方header模块中的内容显示位置不是版心，而是“北京”右下方。故此处需限定
      该li的高度，若仍无法解决就添加overflow，隐藏超出部分。*/
    height: 30px;
    overflow: hidden;
}
.shortcut .fr li {
    /*让导航栏中的右浮动模块中的li水平显示*/
    float: left;
}
.spacer {
    /*导航栏右侧的小竖线，用一个小长方形实现*/
    width: 1px;
    height: 10px;
    background-color: #ccc;
    margin: 10px 10px 0;
}
.dropdown {
    /*放置导航栏右侧中的下拉箭头。先用padding-right撑开盒子，再用定位将小箭头加在文字右侧。*/
    padding-right: 15px;
    position: relative;
}
/*导航栏右侧的下拉图标*/
.dropdown i {
    font-family: icomoon;
    font-style: normal;
    font-size: 16px;
    /*下拉图标的字体大小比左侧文字大，因为基线对齐问题会导致文字位置下移。
    用定位修改下拉图标位置可解决该问题。*/
    position: absolute;
    right: -3px;
    top: -3px;
}
.erweima {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    padding: 1px;
    /*用定位实现二维码的放置*/
    position: absolute;
    left: -10px;
    top: 30px;
}
/*快捷导航模块结束*/
/*header模块开始*/
.header {
    height: 140px;
}
.inner {
    height: 140px;
    /*background-color: pink;*/
    position: relative;
}
/*logo部分*/
.logo {
    width: 190px;
    height: 170px;
    background-color: purple;
    position: absolute;
    top: -30px;
    left: 0px;
    box-shadow: 0 -12px 10px rgba(0,0,0,.2);
}
.logo h1 {
    /*h1默认带有margin，导致里面的a下移，故此处需清除margin。*/
    margin: 0;
}
.logo a {
    display: block;
    width: 190px;
    height: 170px;
    background: url("../images/logo.jpg") no-repeat;
    /*a里面虽然填充了logo背景图片，但是文字“京东”因其在搜索引擎中起到关键字的作用而不能删除，
    故此处利用首行缩进text-indent，将其向左移动出a的显示区域，保险起见再添加overflow进行隐藏。*/
    text-indent: -99999px;
    overflow: hidden;
}
/*搜索框部分*/
.search {
    width: 550px;
    height: 35px;
    background-color: purple;
    position: absolute;
    left: 320px;
    top: 25px;
}
/*search总宽度是550=input总宽度为(493+1+5+1)px + button总宽度50px
虽然从总宽度的角度来看，input和button能够正好在一行显示，但由于两者为行内块，两个行内块之间
默认存在一定的间隔，故此处还需添加浮动来去除该默认间距。*/
.search input {
    width: 493px;
    height: 33px;
    border: 1px solid #f10215;
    padding-left: 5px; /*设置搜索框内输入的文字与搜索框左边框的间距*/
    outline: none; /*取消默认的蓝色边框*/
    color: #989898;
    float: left;
}
.search button {
    width: 50px;
    height: 35px;
    background-color: #f10215;
    float: left;
    cursor: pointer; /*鼠标移动到button上方时变成小手*/
    outline: none;
}
/*搜索框右侧的放大镜字体图标*/
.search i {
    font-family: icomoon;
    color: #fff;
    font-style: normal;
    font-size: 16px;
}
.search em {
    width: 19px;
    height: 15px;
    position: absolute;
    top: 10px;
    right: 65px;
    background: url("../images/sprite-search.png") no-repeat;
    cursor: pointer;
}
.search em:hover {
    background-position: -30px 0;
}
/*热词部分*/
.hotwords {
    position: absolute;
    top: 70px;
    left: 320px;
}
.hotwords a {
    color: #9e9b99;
    font-size: 12px;
    /*a为行内块元素，两个a之间默认存在间距，先用浮动删除间距，再设置margin-right。*/
    float: left;
    margin-right: 10px;
}
.hotwords a:hover {
    color: #f10215;
}
/*我的购物车部分*/
.myCar {
    width: 188px;
    height: 33px;
    border: 1px  solid #ccc;
    position: absolute;
    top: 25px;
    right: 100px;
    text-align: center;
    line-height: 33px;
    background-color: #fff;
}
.myCar i {
    font-family: icomoon;
    font-style: normal;
    color: #f10215;
    margin-right: 3px;
}
.myCar a {
    font-size: 14px;
    color: #f10215;
}
/*我的购物车右上角显示计数的小圆*/
.myCar s {
    position: absolute;
    top: 5px;
    /*该小圆内的数字会随着购物车内商品数而变化，即该s盒子的大小会变化，
    若定位时采用right，当s盒子变大时，整个盒子以右边框为基准向左撑开，
    导致文字“我的购物车”被遮挡，故此处因采用left，以左边框为基准，当s盒子
    变大时，会向右撑开盒子，不会遮挡“我的购物车”。*/
    left: 142px;

    text-decoration: none;
    background-color: #f10215;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    padding: 0 3px;
    border-radius: 7px;
    color: #ffffff;
}
/*平板电脑大促部分*/
.computer {
    position: absolute;
    right: 0px;
    bottom: 10px;
}
.computer a {
    display: block;
    width: 190px;
    height: 40px;
    background: url("../images/computer.jpg") no-repeat;
}
/*导航栏信息部分*/
.navitems {
    position: absolute;
    left: 200px;
    bottom: 0;
}
.navitems ul {
    float: left;
}
.navitems ul li {
    float: left;
    /*实现各个单词之间的间距*/
    margin-left: 30px;
}
.navitems li a {
    font-size: 16px;
    color: #555a5f;
    font-weight: 700;
    /*用行高实现导航栏与下方模块之间的间距.*/
    height: 40px;
    line-height: 40px;
    /*若不转换成block，鼠标只有放到文字上才会变成小手，
    转换成了block，鼠标放在文字所在的盒子上就会变成小手。*/
    display: block;
}
.navitems li a:hover {
    color: #f10215;
}
.navitems .spacer {
    /*原本的.spacer是没有浮动的，但是.navitems里面的ul和li均有浮动，
      此处若直接用原本的.spacer，会导致布局上的混乱，故须给.spacer加上浮动，
      若直接在原来的.spacer添加浮动会影响之前快捷导航模块中的布局，所以此处要特别
      声明是在.navitems里面的.spacer添加浮动，增加其权重。*/
    float: left;
    /*小竖线与左右文字之间的距离是20px，但是之前在设置文字间距时给每个li设置了30px的
    margin-left，导致小竖线与右侧文字之间已经存在了30px的间距，所以此处应将小竖线的
    margin-right设置为-10px。*/
    margin-top: 15px;
    margin-left: 20px;
    margin-right: -10px;
}
/*header模块结束*/
/*footer模块开始*/
.footer {
    height: 560px;
    background-color: #eaeaea;
}
.footer-service {
    height: 100px;
    border-bottom: 1px solid #dedede;
}
.footer-service-inner {
    /*上下30px的padding值使得该盒子里的内容垂直居中，然后高度由盒子里的内容撑开。*/
    padding: 30px 0;
}
.footer-service-inner li {
    width: 297px;
    height: 42px;
    float: left;
}
.service-unit {
    width: 225px;
    height: 42px;
    margin: 0 auto;
    position: relative;
}
/*精灵图实现h5盒子中的内容*/
.service-unit h5 {
    width: 36px;
    height: 42px;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/ico.png") no-repeat;
    text-indent: -999px;
    overflow: hidden;
}
.service-unit .kuai {
     background-position: 0 -43px;
}
.service-unit .hao {
    background-position: 0 -86px;
}
.service-unit .sheng {
    background-position: 0 -129px;
}
.service-unit p {
    line-height: 42px;
    margin-left: 45px;
    font-size: 18px;
    font-weight: 700;
}
.footer-help {
    height: 180px;
    /*background-color: pink;*/
    padding-top: 20px;
}
.footer-help dl {
    float: left;
    width: 195px;
}
.footer-help dt {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    height: 30px;
}
.footer-help dd {
    height: 22px;
}
.footer-help dl a {
    font-size: 12px;
    color: #727272;
}
.footer-help dl a:hover {
    color: #f10215;
}
.footer-help .cover {
    float: right;
    width: 207px;
    height: 150px;
    background: url("../images/ico_footer.png") no-repeat;
}
.cover dt {
    text-align: center;
}
.footer-help .info {
    width: 175px;
    /*.info所在的dd若不给行高，则会默认继承父盒子22px的行高，导致下方的a被遮挡，
    故此处需设定行高，另a在.info所含文字的下方显示。*/
    height: 50px;

    font-size: 12px;
    margin-top: 5px;
    margin-left: 10px;
    color: #727272;
    line-height: 18px;
}
.footer-help .more {
    text-align: right;
    padding-right: 15px;
}
.copyright {
    border-top: 1px solid #ccc;
    padding-top: 15px;
}
.links {
    text-align: center;
}
.links a {
    font-size: 12px;
    color: #727272;
}
.links a:hover {
    color: #f10215;
}
.links span {
    font-size: 12px;
    color: #d4cdcd;
    margin: 0 8px;
}
.c-info {
    text-align: center;
    font-size: 12px;
    color: #999;
    line-height: 20px;
    margin-top: 10px;
}
.c-info a {
    color: #999;
}
.c-info a:hover {
    color: #f10215;
}
.c-info .span-split {
    margin: 0 10px;
}
.tupian {
    text-align: center;
    margin: 25px 0;
}
.tupian a {
    display: inline-block;
    width: 103px;
    height: 32px;
    margin: 0 3px;
    background: url("../images/ico_footer.png") no-repeat 0 -151px;
}
.tupian .kexin {
    background-position: -103px -151px;
}
.tupian .jingcha {
    background-position: 0px -184px;
}
.tupian .chengxin {
    background-position: -103px -184px;
}
.tupian .jubao {
    background-position: 0px -217px;
}
.tupian .app {
    background-position: -103px -217px;
}

/*footer模块结束*/